<template>
  <div class="vid">
    <loading v-if="!userInfo._id && !videosData.length && !videoData._id"></loading>
    <div v-else class="videos-wrapper">
      <div class="left">
        <user-info :userInfo="userInfo"></user-info>
        <div class="videos-data">
          <div class="title">视频库列表</div>
          <ul class="silde-item">
            <li v-for="data in videosData" :key="data._id" v-if="data.videoNumber">
              <div class="name" @click="gotoVideos(data._id)">
                <span>{{data.name}}</span>
                <span>
                  视频数：
                  <i>{{data.videoNumber}}</i>
                </span>
              </div>
              <div class="tags" v-if="data.tags.length && data.tags[0]">
                <el-tag size="mini" v-for="tag in data.tags" :key="tag.id">{{tag}}</el-tag>
              </div>
              <div class="date">
                <span>更新时间：{{data.updated | setDate}}</span>
              </div>
            </li>
          </ul>
        </div>
        <bei />
      </div>
      <div class="right">
        <div class="videos-wrapping" v-if="videoData._id">
          <div class="name">
            <span class="h2">{{videoData.name}}</span>
            <span>
              视频数：
              <i>{{videoData.videoNumber}}</i>
            </span>
          </div>
          <div class="tags" v-if="videoData.tags && videoData.tags[0]">
            <el-tag size="mini" v-for="tag in videoData.tags" :key="tag.id">{{tag}}</el-tag>
          </div>
          <div class="date">
            <span>创建日期：{{videoData.created | setDate}}</span>
            <span>更新日期：{{videoData.updated | setDate}}</span>
          </div>
          <div class="desc">
            <span>{{videoData.desc}}</span>
          </div>
        </div>
        <div class="video-wrapping">
          <ul>
            <li v-for="data in videoData.video" :key="data._id">
              <div class="li-wrapper">
                <div class="img" @click="gotoPlayVideos(data._id)">
                  <video :src="data.videoUrl | setVideoUrl"></video>
                </div>
                <div class="text">
                  <p>{{data.video.label}}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <div class="recomment-video">
          <div class="recomment-label">推荐视频库</div>
          <recomment-video />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { slider } from "@/public/slider.js";
import recommentVideo from "@/views/blogs/navs/blog_video";
import userInfo from "@/components/comment/newUserInfo.vue";
import { mapActions } from "Vuex";
export default {
  name: "videos-data",
  components: {
    "user-info": userInfo,
    "recomment-video": recommentVideo
  },
  data() {
    return {
      id: "",
      userInfo: {},
      videosData: [],
      videoData: {}
    };
  },
  activated() {
    this.id = this.$route.params.id;
  },
  watch: {
    $route(pre, now) {
      if (pre.name === "videos_data_id" && now.name === "videos_data_id") {
        this.id = this.$route.params.id;
      }
    },
    id() {
      if (this.id) {
        this.userInfo = {};
        this.videosData = [];
        this.videoData = {};
        this.initMethods(this.id);
      }
    }
  },
  methods: {
    gotoVideos(id) {
      this.$router.push(`/videos/` + id);
    },
    gotoPlayVideos(id) {
      this.$router.push(`/look_videos/` + id);
    },
    initMethods(id) {
      this.getUserInfoInVideos({
        _id: id
      }).then(res => {
        this.userInfo = res.data.data;
        this.videosData = res.data.data.videos;
        this.$nextTick(() => {
          slider(document.getElementsByClassName("silde-item")[0]);
        });
      });
      this.getVideoInVideos({
        _id: id
      }).then(res => {
        this.videoData = res.data.data;
      });
    },
    ...mapActions("user", ["getUserInfoInVideos", "getVideoInVideos"])
  }
};
</script>

<style lang="sass" scoped>
@import '@/assets/default.sass'
.vid
  width: 100%
  height: 100%
  background-color: #eee
  padding: 20px 0
  min-height: 93vh
  .videos-wrapper
    width: 1280px
    height: 100%
    margin: 0 auto
    @include flex(space-between,flex-start)
    .left
      flex: 0 0 25%
      overflow: hidden
      .videos-data
        margin-top: 10px
        background-color: #fff
        .title
          width: 100%
          height: 40px
          line-height: 40px
          padding-left: 10px
          font-size: 16px
          color: #333
          @include title-before(5px,16px,12px,0px,#eb2001)
        >ul
          padding: 10px
          width: 100%
          overflow: hidden
          >li
            width: 100%
            border-bottom: 1px solid #eee
            padding: 10px
            &:last-child
              border: none
            .name
              width: 100%
              line-height: 30px
              height: 30px
              overflow: hidden
              cursor: pointer
              font-size: 16px
              color: #333
              @include flex(space-between,center)
              >span
                display: block
                >i
                  color: #eb2001
              >span:last-child
                font-size: 14px
              &:hover
                color: #eb2001           
            .tags
              width: 100%
              height: 32px
              line-height: 32px
              overflow: hidden
            .date
              width: 100%
              height: 25px
              line-height: 25px
              overflow: hidden          
    .right
      flex: 0 0 74%
      overflow: hidden
      .videos-wrapping
        width: 100%
        background: #fff
        padding: 10px
        .name
          width: 100%
          height: 40px
          @include flex(space-between,center)
          >span
            display: block
          .h2
            font-size: 16px
            color: #333
            font-weight: 700
          i
            color: #eb2001
        .date
          width: 100%
          height: 30px
          @include flex(space-between,center)
          >span
            display: block
        .tags
          width: 100%
          height: 32px
          line-height: 32px
        .desc
          width: 100%
          padding: 5px 0
          line-height: 20px
          color: #999
      .video-wrapping
        width: 100%
        background-color: #fff
        margin-top: 10px
        >ul
          width: 100%
          padding: 0 5px
          >li
            width: 19%
            height: 180px
            padding: 10px 0
            margin-right: calc(5%/4)
            display: inline-block
            overflow: hidden
            cursor: pointer
            &:nth-child(5n)
              margin-right: 0
            .li-wrapper
              width: 100%
              height: 100%
              border: 1px solid #eee
              .img
                width: 100%
                height: 120px
                overflow: hidden
                @include flex(center,center)
                >video
                  width: 100%
                  height: 100%
                  object-fit: cover
              .text
                width: 100%
                height: 40px
                line-height: 40px
                text-align: center
                background-color: #eee
      .recomment-video
        width: 100%
        height: 100%
        margin-top: 10px
        .recomment-label
          width: 100%
          height: 40px
          line-height: 40px
          font-size: 16px
          font-weight: 700 
          background-color: #fff
          padding-left: 10px
          @include title-before(5px,16px,12px,0px,#eb2001)         
</style>